<template>
  <div class="box2">
    <div class="title">
      <p>型号数量</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图标的容器 -->

    <div class="charts" ref="charts"></div>
    <div class="page">
      <text @click="cutdown">< </text> {{ page }}/5 <text @click="cut"> ></text>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from "vue";
//引入echarts
import * as echarts from "echarts";
const props = defineProps({
  carcount: Object,
});

let charts = ref();
let data = ref();
const setOption = (mychart, Data) => {
  //设置配置项
  var option = {
    title: {
      text: "型号数量排行榜",
      left: "center",
      textStyle: {
        //标题颜色
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "车名",
        type: "pie",
        radius: ["30%", "60%"],
        padAngle: 3,
        center: ["50%", "50%"],
        data: Data[1], // 修改为 Data[1]
        label: {
          show: true,
          fontSize: 16,
          color: "#fff",
          fontWeight: "bold", // 文字粗细
        },
        emphasis: {
          itemStyle: {
            borderRadius: 10,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
      },
    ],
  };
  mychart.setOption(option);
}; 
//页码切换
const getArrPage = (data, pageNum, pageSize) => {
  const startIndex = (pageNum - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return [
    data[0].slice(startIndex, endIndex),
    data[1].slice(startIndex, endIndex),
  ];
};
let page = ref(1);
const cut = () => {
  page.value = page.value < 5 ? ++page.value : 1;
  data.value = getArrPage(props.carcount, page.value, 10);
};
const cutdown = () => {
  page.value = page.value >= 5 ? --page.value : 1;
  data.value = getArrPage(props.carcount, page.value, 10);
};
// 监听 props.cartype 的变化
watch(
  () => data.value, // 修改为 data.value
  (newValue) => {
    // 在数据变化时重新设置图表的数据和选项

    let mychart = echarts.init(charts.value);
    mychart.clear();
    setOption(mychart, newValue);
  }
);
watch(
  () => props.carcount, // 修改为 data.value
  (newValue) => {
    // 在数据变化时重新设置图表的数据和选项
    newValue = getArrPage(newValue, 1, 10);

    let mychart = echarts.init(charts.value);
    mychart.clear();
    setOption(mychart, newValue);
  }
);
//组件挂载完毕初始化图形图标
onMounted(() => {
  data.value = getArrPage(props.carcount, 1, 10);
  let mychart = echarts.init(charts.value);
  mychart.clear();
  setOption(mychart, data.value); // 修改为 data.value
});
</script>

<style scoped lang="scss">
.box2 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  // background-color: #fff;
  margin-top: 5px;
  .title {
    margin-left: 20px;
    text-align: left;
    color: white;
    font-weight: bold;

    p {
      margin: 5px;
      // color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: 250px;
  }
  .page {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
  }
}
</style>